<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <!-- <el-form-item prop="timeType">
          <el-select v-model="queryParams.timeType" size="small" @change="handleQuery" style="width: 90px">
            <el-option :value="1" label="按秒"/>
            <el-option :value="2" label="按分钟"/>
            <el-option :value="3" label="按小时"/>
            <el-option :value="4" label="按天"/>
          </el-select>
        </el-form-item> -->
        <el-form-item prop="dateRange">
          <el-date-picker size="small"
                          :clearable="false"
                          v-model="dateRange"
                          type="datetimerange"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          range-separator="-"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          style="width: 350px"
                          @change="handleQuery">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button type="primary" icon="el-icon-download" size="mini" @click="exportReport">导出</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="list" border :height=620>
        <el-table-column label="时间" align="center" prop="dt" width="180" fixed/>
        <el-table-column v-for="row in plcCacheList" :label="row.cacheDescr" align="center" :prop="row.cacheCode.toLowerCase().replace(/_(.)/g, function(match, group1) {
          return group1.toUpperCase();
        })"
                         />
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </div>
  </template>

  <script>
    import {
        getEnergyHistory,
        exportEnergyHistory
    } from '@/api/app/energy/pwater'

    export default {
      name: "history",
      data() {
        return {
          loading: false,
          total: 0,
          list: [],
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 20,
            timeType: 1,
          },
          plcCacheList: [],
            dateRange: [this.moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss'), this.moment().format('YYYY-MM-DD HH:mm:ss')],
        }
      },
      created() {
        this.getList()
      },
      methods: {
        getList() {
          this.loading = true
            this.queryParams.beginTime = null
            this.queryParams.endTime = null
            if (this.dateRange) {
                this.queryParams.beginTime = this.dateRange[0]
                this.queryParams.endTime = this.dateRange[1]
            }
            getEnergyHistory(this.queryParams).then(res => {
            this.list = res.data.rows
            this.total = res.data.total
            this.plcCacheList = res.data.plcCacheList
            this.loading = false
          })
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1
          this.getList()
        },
        exportReport() {
            this.queryParams.beginTime = null
            this.queryParams.endTime = null
            if (this.dateRange) {
                this.queryParams.beginTime = this.dateRange[0]
                this.queryParams.endTime = this.dateRange[1]
            }
            exportEnergyHistory(this.queryParams).then(res => {
            this.download(res.msg)
          })
        },
      }
    };
  </script>
  <style scoped>
     .el-form-item {
      margin-bottom: 10px;
    }
  </style>
